<template>
  <el-container>
    <el-header>佣金记录</el-header>
    <el-main>
      <el-header style="display: flex; justify-content: space-around">
        <div style="display: flex">
          昵称/ID：
          <div>
            <el-input v-model="name" placeholder="请输入内容" clearable></el-input>
          </div>
        </div>
        <div style="display: flex">
          佣金范围：
          <div class="box">
            <el-input v-model="text1" placeholder="￥" clearable></el-input>
          </div>
          -
          <div class="box">
            <el-input v-model="text2" placeholder="￥" clearable></el-input>
          </div>
        </div>
      </el-header>

      <el-header>
        <el-button type="primary" @click="dian">
          <i class="el-icon-search"></i>
          搜索</el-button
        >
      </el-header>

      <el-table :data="tableData" style="width: 100%">

        <el-table-column prop="uid" label="用户ID"></el-table-column>

        <el-table-column prop="uid" label="总佣金金额"></el-table-column>

        <el-table-column prop="uid" label="账户余额"></el-table-column>

        <el-table-column prop="uid" label="账户佣金"></el-table-column>

        <el-table-column prop="uid" label="提现到账佣金"></el-table-column>

        <el-table-column prop="uid" label="操作"></el-table-column>

      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import { Table } from "../api/CommissionRecord"
export default {
  data() {
    return {
      name: "",
      text1: "",
      text2: "",
      tableData: [],
    };
  },
  created() {
    Table().then(res=>{
        console.log(res.data);
    })
  },

  methods: {
    dian() {
      
    },
  },
};
</script>
<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #b3c0d1;
  color: #333;
  //   line-height: 160px;
}
.box{
    width: 200px;
    margin: 0 10px;
}
</style>